<template>
  <div class="my-meet">
    <div class="my-top">
      <span class="top-tips">仅展示今天的所有会议内容</span>
      <div class="top-search">
        <Input
          v-model:value="name"
          class="search-input search-w280"
          placeholder="查询会议名称"
          allowClear
        />
        <Select :options="options" class="search-w280" placeholder="请选择设备" allowClear />
      </div>
    </div>
    <!-- table content -->
    <DraggableTable />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Input, Select } from 'ant-design-vue';
  import { getDictTypeListApi } from '/@/api/admin/dict';
  import { DICT } from '/@/enums/dict';

  import DraggableTable from './draggable-table.vue';

  const name = ref('');
  const options = ref<any[]>([]);

  // 获取设备列表
  const getDeviceInformation = async () => {
    options.value = await getDictTypeListApi({ type: DICT.DEVICE_INFORMATION });
  };
  getDeviceInformation();
</script>

<style lang="less" scoped>
  .my-meet {
    .my-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .top-tips {
        color: #666;
        font-size: 14px;
      }

      .top-search {
        display: flex;
        align-items: center;

        .search-input {
          margin-right: 24px;
        }

        .search-w280 {
          width: 280px;
        }
      }
    }
  }
</style>
